<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备号" prop="sn">
        <el-input v-model="queryParams.sn" placeholder="请输入设备号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="指令方向" prop="state">
        <el-select @change="getList" v-model="queryParams.state" placeholder="请输入指令方向" clearable>
          <el-option v-for="dict in dtu_direction" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="指令码" prop="code">
        <el-select @change="getList" v-model="queryParams.code" placeholder="请输入指令码" filterable clearable>
          <el-option v-for="dict in dtu_code" :key="dict.value" :label="dict.label + ' (' + dict.value + ')'"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-if="is_pc == true" v-loading="loading" :data="dtuList">
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="数据方向" align="center" prop="state">
        <template #default="scope">
          <dict-tag :options="dtu_direction" :value="scope.row.state.toString()" />
        </template>
      </el-table-column>
      <el-table-column label="数据状态" align="center" prop="type">
        <template #default="scope">
          <dict-tag :options="dtu_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="指令下发时间" align="center" prop="createTime" />
      <el-table-column label="设备号" align="center" prop="sn" />
      <el-table-column label="IP地址" align="center" prop="ip" />
      <el-table-column label="端口号" align="center" prop="port" />
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script setup name="Operate">
import { listDtu } from "@/api/operate/dev";

const { proxy } = getCurrentInstance();
const { dtu_code, dtu_direction, dtu_type } = proxy.useDict("dtu_code", "dtu_direction", "dtu_type");

const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const dtuList = ref([])
const open = ref(false)
const is_pc = ref(false)

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  sn: null,
  state: null,
  code: null,
});

function getList() {
  loading.value = true;
  if (queryParams.value.sn == "") queryParams.value.sn = null;
  if (queryParams.value.state == "") queryParams.value.state = null;
  if (queryParams.value.code == "") queryParams.value.code = null;
  listDtu(queryParams.value).then((response) => {
    if (response.code == 0) {
      for (let i = 0; i < response.rows.length; i++) {
        response.rows[i].is_checked = false;
      }
      dtuList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    }
  });
}

function getCollapse() {
  const screenWidth = window.innerWidth;
  if (screenWidth < 768) {
    is_pc.value = false;
  } else {
    is_pc.value = true;
  }
}

function checkShow(index) {
  dtuList.value[index].is_checked = !dtuList.value[index].is_checked;
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

getList();
getCollapse();
/** 页面宽度变化时 */
window.onresize = () => {
  getCollapse();
};
</script>

<style lang="scss" scoped>
.flex_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dtu_card {
  position: relative;
  margin-bottom: 0.625rem;
  border-radius: 0.625rem;
}

.dtu_card .dtu_col {
  margin: 0.125rem 0;
  font-size: 0.875rem;
}

.dtu_group {
  margin: 0.5rem 0;
  padding: 0.5rem 0;
  border-top: 0.0625rem solid #eee;
  border-bottom: 0.0625rem solid #eee;
}

.txt_data {
  display: block;
  margin: 5px 0;
  word-break: break-all;
}
</style>
